<template>
  <div class="section">
    <div class="card">
      <div style="justify-content:center" class="card-header">
        <h3 style="font-size:24px;margin:5px 0;">{{formData.id?"修改":"新增"}}通知</h3>
      </div>
      <div class="card-content">
        <div class="field has-addons">
          <label class="label" style="width:60px;">标题：</label>
          <input v-model="formData.title" name="title" class="input" type="text" />
        </div>
        <div class="field has-addons">
          <label class="label" style="width:60px;">内容：</label>
          <textarea
            v-model="formData.content"
            name="content"
            class="textarea"
            style="min-width:auto;"
          ></textarea>
        </div>
      </div>
      <footer class="card-footer">
        <p class="card-footer-item">
          <ZxBtn @click="submit" type="success">保存</ZxBtn>
        </p>
        <p class="card-footer-item">
          <ZxBtn @click="$router.push('/index/notice')" type="info">取消</ZxBtn>
        </p>
      </footer>
    </div>
  </div>
</template>

<script>
import ZxBtn from "../uiComps/ZxBtn.vue";
import ZxBtnGroup from "../uiComps/ZxBtnGroup.vue";
import Modal from "../uiComps/Modal.vue";
import ZxTable from "../uiComps/ZxTable.vue";
import Page from "../uiComps/Page.vue";
import { createNamespacedHelpers } from "vuex";
let { mapActions } = createNamespacedHelpers("notice")
export default {
  data() {
    return {
      formData: {}
    };
  },
  methods: {
    ...mapActions(["save"]),
    submit() {
      this.$loading.show();
      this.save(this.formData).then(() => {
        this.$loading.hide();
        this.$router.push("/index/notice");
      });
    }
  },
  mounted() {
    if (this.$route.query) {
      this.formData = { ...this.$route.query };
    }
  },
  components: {
    "zx-modal": Modal,
    "zx-table": ZxTable,
    "zx-page": Page,
    ZxBtn,
    ZxBtnGroup
  }
};
</script>

<style>
</style>
